import React, {Component} from 'react';
import {QuestionCircleOutlined} from "@ant-design/icons";
import ThePagination from "@/components/ThePagination";
import {Tooltip} from "antd";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
import _ from 'lodash';

import { apiGetCityPage,apiDeleteCityCarousel } from '@/request/category'

class Index extends Component {
    state = {
        columns: [
            {
                title: "序号",
                dataIndex: "index",
                key: "index",
                render: (text, record, index) => {
                    return ((this.state.pageData.pageNo - 1) * (this.state.pageData.pageSize) + (index + 1));
                }
            },
            {
                title: "城市",
                dataIndex: "cityNameZh",
                key: "cityNameZh",
                render:(text, record, index) => {
                    console.log(record)
                    let str = ''
                    record.map((item,index)=>{
                        str+=item.cityNameZh
                        if(index!==record.length-1){
                            str+=","
                        }
                    })
                    return str;
                }
            },
            {
                title: "操作",
                dataIndex: "serviceShowFile",
                key: "serviceShowFile",
                fixed: 'right',
                render: (text, render) => {
                    return <div>
                        <TheButton haspermi={['home:category:edit']} onClick={() => this.props.history.push('/settings/Category/'+render[0].centerId)}>编辑</TheButton>
                        {render[0].centerId==="1"?'':<TheButton haspermi={['home:category:del']} onClick={() => this.del(render)}>删除</TheButton>}
                    </div>
                }
            },
        ],
        newColumns: [],
        form_show: true,
        dataSource: [],
        pageData: {
            pageNo: 1,
            pageSize: 10
        },
        total: 0,
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async()=> {
        const response = await apiGetCityPage({
            pageNo: this.state.pageData.pageNo,
            pageSize: this.state.pageData.pageSize
        });
        if (response.code === 0) {
            this.setState({
                dataSource:response.data,
                pageData: {
                    pageNo: response.pageNo,
                    pageSize: response.pageSize
                },
                total: response.totalCount,
            },()=>{

            });
        }
    }
    del = async (e) =>{
        const response = await apiDeleteCityCarousel({
            centerId: e[0].centerId,
        });
        if (response.code === 0) {
            React.$message({
                type: "success",
                content: "删除成功",
            });
            await this.getData()
        }
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageData: {
                pageNo, pageSize
            }
        }, () => {
            this.getData()
        })
    };

    onTableRefresh() {
        this.getData()
    }

    onColumnsFilter(value) {
        this.setState({
            newColumns: value
        })
    }

    render() {
        let {columns, dataSource, pageData, total, form_show, newColumns} = this.state

        return (
            <div className="p-layout-box commodity-examine">
                <TheTableExtend
                    columns={columns}
                    onFormTrigger={() => this.setState({form_show: !this.state.form_show})}
                    onTableRefresh={() => this.onTableRefresh()}
                    onColumnsFilter={(value) => this.onColumnsFilter(value)}
                >
                    <TheButton size="middle" haspermi={['home:category:add']}
                               onClick={() => this.props.history.push('/settings/Category/null')}
                               type="primary">新增</TheButton>
                </TheTableExtend>
                <TheTable
                    scroll={{x: "max-content", y: '63vh'}}
                    columns={newColumns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageData.pageNo}
                    pageSize={pageData.pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
            </div>
        );
    }
}

export default Index;
